<template>
    <RouterLink to="/ShowUserBorrowRedeemInfo">用户还款</RouterLink>

    <h2 style="text-align: center;">用户借款列表</h2>
        项目名称:<input type="text" v-model="Bname" >
    利息:<select v-model="Iid">
        <option value="0">==请选择==</option>
        <option v-for="item in InterestInfo" :value=item.I_Id>{{item.I_Interest}}</option>
    </select>
    <button @click="LoadData">查询</button>
    <table style="text-align: center; width: 100%;">
         <thead style="background-color: aqua;"> 
            <tr>
                <th>借款ID</th>
                <th>借款名称</th>
                <th>借款最高金额</th>
                <th>借款年限</th>
                <th>借款利息</th>
                <th>借款简历</th>
                <th>借款发布时间</th>
                <th>操作</th>
            </tr>
         </thead>
         <tbody>
              <tr v-for="item in BorrowInfo" >
                  <td>{{item.B_Id}}</td>
                  <td>{{item.B_Name}}</td>
                  <td>{{item.B_MaxMoney}}</td>
                  <td>{{item.B_Year}}</td>
                  <td>{{item.I_Interest}}</td>
                  <td>{{item.B_Content}}</td>
                  <td>{{item.B_Date.substring(0,10)}}</td>
                  <td>
                    <a href="#" @click="SaveData(item.B_Id)">借款</a>
                  </td>
              </tr>
         </tbody>
    </table>
    <span>
        共{{TotalCount}}条数据,每页显示{{PageSize}}条,当前第{{PageIndex}}/{{TotalPage}}页
    </span>
    <span>
        <a href="#" @click="LoadPage('F')">首页</a>&nbsp;
        <a href="#" @click="LoadPage('P')">上一页</a>&nbsp;
        <a href="#" v-for="item in TotalPage" @click="Jump(item)">&nbsp;{{item}}&nbsp;</a>&nbsp;
        <a href="#" @click="LoadPage('N')">下一页</a>&nbsp;
        <a href="#" @click="LoadPage('L')">尾页</a>&nbsp;
    </span> 
    <span>
        跳转至<input type="text" v-model="Cindex" style="width: 30px;">页
        <input type="button" value="跳转" @click="JumpPage()">
    </span>
    <span>
        <select v-model="Csize" @change="ShowPageSize">
            <option value="3">3条/页</option>
            <option value="5">5条/页</option>
            <option value="7">7条/页</option>
        </select>
    </span>
  </template>
  
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter();

const BorrowInfo = ref([
    {
        B_Id:0,
        B_Name:'',
        B_MaxMoney:'',
        B_Year:'',
        I_Interest:'',
        B_Content:"",
        B_Date:"",
    }
])
//创建响应式数据
const PageSize = ref(3);
const PageIndex = ref(1);
const TotalPage = ref(0);
const TotalCount = ref(0);

const Bname = ref('');
const Iid = ref(0)
//生命周期函数勾
onMounted(()=>{
    LoadData();
    SelectData()
})

const InterestInfo = ref([{
    I_Id:0,
    I_Interest:0,
}])

//判定下拉框
const SelectData = ()=>{
    axios("https://localhost:44354/api/Borrows/ShowInterestInfo",{
     }).then(res=>{
        console.log(res.data);
        InterestInfo.value = res.data;
     }).catch(err=>{
        console.log(err);
     })
}

//显示数据
const LoadData = ()=>{
    console.log(Iid.value);
     axios("https://localhost:44354/api/Borrows/ShowBorrowInfo",{
        params:{
            Bname:Bname.value,
            Iid:Iid.value,
            PageSize:PageSize.value,
            PageIndex:PageIndex.value,
        }
     }).then(res=>{
        BorrowInfo.value = res.data.list,
        TotalCount.value = res.data.TotalCount,
        TotalPage.value = res.data.TotalPage
       
     }).catch(err=>{
        console.log(err);
     })
}

//基本分页
const LoadPage = (type:string)=>{
    switch(type){
        case 'F':
            PageIndex.value = 1;
            break;
        case 'P':
            if(PageIndex.value == 1)
            {
                alert("已经是第一页了");
                return
            }
            PageIndex.value--;
            break;
        case 'N':
            if(PageIndex.value == TotalPage.value)
            {
                alert("已经是最后一页了");
                return
            }
            PageIndex.value++;
            break;
        case 'L':
            PageIndex.value = TotalPage.value;
            break;
    }
    LoadData();
}

const Cindex = ref("")

//跳转页面
const JumpPage = ()=>{
    if(Cindex.value == "")
    {
        alert("请输入跳转页码");
        return
    }

    const index = Number(Cindex.value)
    if(isNaN(index))
    {
        alert("请输入数字页码");
        return
    }
    if(index<1)
    {
        alert("请输入大于0的整数页码");
        return
    }
    if(index>TotalPage.value)
    {
        alert("输入的页码大于总页数");
        return
    }
    PageIndex.value = index;
    LoadData();
}

const Csize = ref(3)

//显示条数
const ShowPageSize  = ()=>{
   PageSize.value = Csize.value;
   LoadData();
}


//跳转至指定页
const Jump = (index:number)=>{
    PageIndex.value = index;
    LoadData();
}

//跳转至借款页面
const SaveData = (Bid:number) =>{
    router.push({
        name:"AddUserBorrowInfo",
        params:{
            Bid:Bid
        }
    })
}

</script>